<swal title="Delete?"
      [text]="'Claim \'' + claimType.name + '\' will be deleted permanently. This action cannot be reversed.'"
      type="warning"
      [showCancelButton]="true"
      (confirm)="delete()"
      #deleteAlert>
</swal>
<div class="row">
    <div class="col-12">
        <div class="card m-b-30 m-t-30">
            <div class="card-body">
                <h4 class="mt-0 header-title">Edit Claim Type</h4>
                <p class="text-muted m-b-30 font-14">
                    Here you can modify some properties of a system claim type.
                </p>
                <form class="needs-validation"
                      [ngClass]="{ 'was-validated': form.submitted }"
                      (ngSubmit)="form.form.valid && update()"
                      novalidate
                      #form="ngForm">
                    <div class="form-group row">
                        <label for="claim-type-name"
                               class="col-sm-2 col-form-label">
                            Name
                        </label>
                        <div class="col-sm-10 col-form-label">
                            <span class="col-form-label"
                                  id="claim-type-name"
                                  name="claim-type-name">
                                {{ claimType.name }}
                            </span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="claim-type-display-name"
                               class="col-sm-2 col-form-label">
                            Display Name
                        </label>
                        <div class="col-sm-10">
                            <input id="claim-type-display-name"
                                   name="claim-type-display-name"
                                   type="text"
                                   class="form-control"
                                   [ngClass]="{ 'invalid': form.submitted && displayName.invalid }"
                                   [(ngModel)]="claimType.displayName"
                                   maxlength="128"
                                   #displayName="ngModel" />
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="claim-type-description"
                               class="col-sm-2 col-form-label">
                            Description
                        </label>
                        <div class="col-sm-10">
                            <textarea id="claim-type-description"
                                      name="claim-type-description"
                                      class="form-control"
                                      rows="3"
                                      maxlength="1024"
                                      [(ngModel)]="claimType.description">
                            </textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="claim-type"
                               class="col-sm-2 col-form-label">
                            Type (*)
                        </label>
                        <div class="col-sm-10">
                            <select id="claim-type"
                                    name="claim-type"
                                    class="form-control custom-select"
                                    [ngClass]="{ 'invalid': form.submitted && type.invalid }"
                                    [(ngModel)]="claimValueType"
                                    required
                                    #type="ngModel">
                                <option value=""
                                        selected
                                        disabled>
                                    Please select a suitable type
                                </option>
                                <option *ngFor="let type of valueTypes"
                                        [value]="type">
                                    {{ type }}
                                </option>
                            </select>
                            <div *ngIf="form.submitted && type.invalid"
                                 class="form-control-feedback text-danger">
                                Field 'Type' is required.
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="claim-type-rule"
                               class="col-sm-2 col-form-label">
                            Regex Rule
                        </label>
                        <div class="col-sm-10">
                            <input id="claim-type-rule"
                                   name="claim-type-rule"
                                   type="text"
                                   class="form-control"
                                   maxlength="512"
                                   [(ngModel)]="claimType.rule" />
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="claim-type-confirmed"
                               class="col-sm-2 col-form-label">
                            Required Claim
                        </label>
                        <div class="col-sm-10">
                            <div class="form-check col-form-label custom-control custom-checkbox">
                                <input id="claim-type-confirmed"
                                       name="claim-type-confirmed"
                                       type="checkbox"
                                       class="form-check-input custom-control-input"
                                       [(ngModel)]="claimType.required" />
                                <label class="custom-control-label"
                                       for="claim-type-confirmed">
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="claim-type-editable"
                               class="col-sm-2 col-form-label">
                            User Editable
                        </label>
                        <div class="col-sm-10">
                            <div class="form-check col-form-label custom-control custom-checkbox">
                                <input id="claim-type-editable"
                                       name="claim-type-editable"
                                       type="checkbox"
                                       class="form-check-input custom-control-input"
                                       [(ngModel)]="claimType.userEditable" />
                                <label class="custom-control-label"
                                       for="claim-type-editable">
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div>
                            <button type="submit"
                                    class="btn btn-primary m-r-5">
                                Save Changes
                            </button>
                            <button type="button"
                                    class="btn btn-danger m-r-5 float-right"
                                    (click)="deleteAlert.fire()">
                                Delete
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>